<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>烟园疫苗预约后台</title>
		<!-- 引入 layui.css -->
		<link rel="stylesheet" href="//unpkg.com/layui@2.6.7/dist/css/layui.css">

		<!-- 引入 layui.js -->
		<script src="//unpkg.com/layui@2.6.7/dist/layui.js">
			< script src = "js/vue.js"
			type = "text/javascript"
			charset = "utf-8" >
		</script>
		<script src="js/axiox.min.js"></script>
	</head>
	<body>
		<div id="app">
			<div class="layui-nav">
				<ul lay-filter="">
					<li class="layui-nav-item layui-nav-itemed"><a href="./index.html">疫苗接种预约小程序后台</a>
					</li>
					<li class="layui-nav-item">
						<a href="./add.html">添加预约时段</a>
					</li>
					<li class="layui-nav-item"><a href="./import.html">导入可接种数据</a></li>
					<li class="layui-nav-item"><a href="./viewer.html">查看全部数据</a></li>
				</ul>


			</div>
			<div style="margin-top: 20px; margin: 20px;">
				<div class="layui-card">
					<div class="layui-card-header">所有预约时段</div>

				</div>
				<div class="layui-card">
					<table class="pure-table" border="1">
						<tr>
							<th>id</th>
							<th>接种开始时间</th>
							<th>接种结束时间</th>
							<th>疫苗厂商</th>
							<th>是否为第一针</th>
							<th>第一针接种时间限制</th>
							<th>疫苗数量</th>
							<th>开发预约数量</th>
							<th>已预约</th>
							<th>修改</th>
							<th>查看</th>
							<th>删除</th>
						</tr>
						<tr v-for="item in data_time_block">

							<td>{{item.id}}</td>
							<td>{{item.start_time}}</td>
							<td>{{item.end_time}}</td>
							<td v-if="item.manufacturer==0">国药</td>
							<td v-if="item.manufacturer==1">科兴</td>
							<!--<td>{{item.is_first_dose}}</td>-->
							<td v-if="item.is_first_dose==0">第二针</td>
							<td v-if="item.is_first_dose==1">第一针</td>
							<td>{{item.valid_before}}</td>
							<td>{{item.doses}}</td>
							<td>{{item.doses_available}}</td>
							<td>{{item.doses_reserved}}</td>
							<td><button class="layui-btn" @click="change(item.id)">修改</button></td>
							<td><button class="layui-btn" @click="openStuList(item.id)">查看已预约名单</button></td>
							<td><button class="layui-btn" @click="deleteitem(item.id)" >删除</button></td>

						</tr>
					</table>

				</div>
			</div>
			<div style="margin-top: 20px; margin: 20px;">
				<div class="layui-card">
					<div class="layui-card-header">当前所有学生数据</div>

				</div>
				<div class="layui-card">
					<table class="pure-table" border="1">
						<tr>
							<th>id</th>
							<th>姓名</th>
							<th>电话</th>
							<th>第一针接种时间</th>
							<th>第二针接种时间</th>

						</tr>
						<tr v-for="item in data_stu">

							<td>{{item.id}}</td>
							<td>{{item.name}}</td>
							<td>{{item.phone}}</td>
							<td>1</td>
							<td>2</td>

						</tr>
					</table>

				</div>
			</div>
		</div>
		</div>
	</body>
</html>


<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<script>
	//注意：导航 依赖 element 模块，否则无法进行功能性操作
	var app = new Vue({
		el: '#app',
		data: {
			data_time_block: [],
			data_stu: [{
				id: 1,
				name: '测试数据',
				phone: '123456789'
			}],
			url: 'https://test.tabt.cc:81',
		},
		created() {
			//this.now_datatime = Data();
			this.GetAllVaccine();
		},
		methods: {
			GetAllVaccine: function() {
				var that = this;
				//   /api/vaccineList
				//   /api/getUserByVaccine?vaccine=id 
				axios({
					method: 'get',
					url: that.url + '/api/vaccineList'
				}).then(function(res) {
					console.log('data:', res.data);

					var res_json = JSON.parse(JSON.stringify(res.data.data));

					console.log(res_json);
					that.data_time_block = res_json;

					that.$forceUpdate();
					//that.query_my_time();
				});
				axios({
					//done 获取全部学生数据
					method: 'get',
					url: that.url + '/api/GetStuInfo'
				}).then(function(res) {
					console.log('data:', res.data);

					var res_json = JSON.parse(JSON.stringify(res.data.data));

					console.log(res_json);
					that.data_stu = res_json;

					that.$forceUpdate();
					//that.query_my_time();
				});
			},
			openStuList: function(id) {
				window.location.href = ("./stulist.html?id=" + id);
			},
			change: function(id) {
				window.location.href = ("./add.html?id=" + id);
			},
			deleteitem: function(id) {
				var that = this;
				//DelVaccine
				axios({
					//del 数据
					method: 'get',
					url: that.url + '/api/DelVaccine?id='+id
				}).then(function(res) {
					console.log('data:', res.data);
				
					var res_json = JSON.parse(JSON.stringify(res.data));
				
					console.log(res_json);
					if(res_json.success==1)
					{
						alert("删除成功！");
						location.reload();
					}
					else
					{
						alert("删除失败！")
					}
				
					that.$forceUpdate();
					//that.query_my_time();
				});
			},
			
		}
	});
</script>
<style type="text/css">
	html {
		font-family: sans-serif;
		-ms-text-size-adjust: 100%;
		-webkit-text-size-adjust: 100%;
	}


	table {
		border-collapse: collapse;
		border-spacing: 0;
	}

	td,
	th {
		padding: 0;
	}

	.pure-table {
		border-collapse: collapse;
		border-spacing: 0;
		empty-cells: show;
		border: 1px solid #cbcbcb;
	}

	.pure-table caption {
		color: #000;
		font: italic 85%/1 arial, sans-serif;
		padding: 1em 0;
		text-align: center;
	}

	.pure-table td,
	.pure-table th {
		border-left: 1px solid #cbcbcb;
		border-width: 0 0 0 1px;
		font-size: inherit;
		margin: 0;
		overflow: visible;
		padding: .5em 1em;
	}

	.pure-table thead {
		background-color: #e0e0e0;
		color: #000;
		text-align: left;
		vertical-align: bottom;
	}

	.pure-table td {
		background-color: transparent;
	}

	.pure-table-horizontal td,
	.pure-table-horizontal th {
		border-width: 0 0 1px 0;
		border-bottom: 1px solid #cbcbcb;
	}

	.pure-table-horizontal tbody>tr:last-child>td {
		border-bottom-width: 0;
	}
</style>
